<template>
  <div class="fans-list">
    <div class="info-empty" v-if="isEmpty">
      <p v-if="activeTab === 'fans'">
        还没有被关注哦！多发布菜谱，更容易被找到。
      </p>
      <p v-else>还没有关注别人哦！可以预览菜谱，找到别人。</p>
    </div>

    <ul class="fans">
      <!-- <router-link to="" tag="li"> -->
      <li class="clearfix" v-for="item in list" :key="item.userId">
        <router-link
          :to="{ name: 'space', query: { userId: item.userId } }"
          class="img"
        >
          <img :src="item.avatar" alt="" />
        </router-link>

        <div class="c">
          <strong class="name">
            <router-link
              :to="{ name: 'space', query: { userId: item.userId } }"
            >
              {{ item.name }}
            </router-link>
          </strong>
          <em class="info">
            <span>粉丝：</span>
            {{ item.follows_len }} |
            <span> 关注：</span>
            {{ item.following_len }}
          </em>
          <em class="info">
            <span>简介：</span>
            {{ item.sign !== "" ? item.sign : "这个人太懒啦！还没有介绍自己" }}
          </em>
        </div>
      </li>
      <!-- </router-link> -->
    </ul>
  </div>
</template>

<script>
export default {
  props: ["list", "activeTab"],

  data() {
    return {
      isEmpty: true,
    };
  },

  watch: {
    list: {
      handler() {
        this.isEmpty = this.list?.length === 0;
      },
    },
  },
};
</script>

<style>
.fans {
  font-size: 12px;
}
.fans li {
  height: 80px;
  width: 950px;
  border-bottom: 1px solid #eee;
  padding: 20px 20px;
  position: relative;
}
.fans li:hover {
  background-color: #fafafa;
}
.fans li a.img {
  float: left;
  height: 80px;
  width: 80px;
  position: relative;
}
.fans li a.img img {
  display: block;
  width: 80px;
  height: 80px;
}
.fans li div.c {
  float: left;
  height: 80px;
  width: 850px;
  padding-left: 14px;
}
.fans li div.c strong.name {
  display: block;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  padding: 0;
}
.fans li div.c strong.name a {
  color: #333;
}
.fans li div.c strong.name a span {
  color: #ff3232;
}
.fans li div.c strong.name a:hover {
  color: #ff3232;
  text-decoration: underline;
}
.fans li div.c em.info {
  height: 24px;
  line-height: 24px;
  display: block;
  color: #999;
  width: 100%;
}
div.c em.info span {
  color: #666;
  padding: 0;
  display: inline-block;
}
/* .fans li div.c p {
  font-size: 14px;
  color: #666;
  line-height: 24px;
  height: 48px;
  overflow: hidden;
}

.fans li div.c p a {
  color: #666;
}

.fans li div.c p a:hover {
  color: #ff3232;
  text-decoration: underline;
}

.fans li div.c p strong {
  font-size: 12px;
  padding-right: 10px;
}

.fans li div.c p strong em {
  color: #ff3232;
  padding-right: 4px;
}

.fans li div.c span.time {
  position: absolute;
  height: 20px;
  line-height: 20px;
  right: 20px;
  top: 20px;
  color: #999;
}

.fans li div.c span.time a {
  color: #999;
  padding-left: 10px;
  display: none;
}

.fans li div.c span.time a:hover {
  color: #ff3232;
} */
</style>